<template>
	<view class="index">
		<view class="plan" v-for="(item, index) in this_data_list" :key="index">
			<view class="planBox">
				<view class="topBox" @tap="goToRoom(index)">
					<image class="liveImg" mode="aspectFill" :src="item.share_img_path"></image>
					<view class="mask">
						<view class="status" v-if="item.live_status == 102 && item.leave_times > 0">
							<view class="title">直播倒计时</view>
							<view class="time">{{item.leave_time}}</view>
						</view>
						<view class="status" v-if="item.live_status == 102 && item.leave_times < 0">未开始</view>
						<view class="status" v-else-if="item.live_status == 101">直播中</view>
						<view class="status" v-else-if="item.live_status == 103">已结束</view>
						<view class="status" v-else-if="item.live_status == 104">禁播</view>
						<view class="status" v-else-if="item.live_status == 105">暂停</view>
						<view class="status" v-else-if="item.live_status == 106">异常</view>
						<view class="status" v-else-if="item.live_status == 107">已过期</view>
					</view>
				</view>
				<view class="bottomBox">
					<view class="left">
						<view class="title">{{item.name}}</view>
						<view class="liveTime">
							<view class="icon">主播</view>
							<view>开播时间 {{item.start_time_show}}-{{item.end_time_show}}</view>
						</view>
					</view>
					<view class="iconBox" @tap="moreEvent(item)">
						<u-icon name="more-dot-fill" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="noContent" v-if="this_data_list.length == 0">
			<image class="noContentImage" mode="widthFix" src="@/static/noLive.png"></image>
			<view class="text">暂无直播计划</view>
		</view>


		<view class="sharePopoup" v-if="sharePopoupShow">
			<view class="mask"></view>
			<view class="content">
				<view class="shareImageBox" @tap="sharePopoupShow = false">
					<image class="shareImage" :src="shareImage" mode="widthFix"></image>
				</view>
				<view class="shareBox">
					<button size="mini" class="item" hover-class="node" @tap="downloadImage">
						<view class="iconBox download">
							<text class="custom-icon custom-icon-xiazai"></text>
						</view>
						<text class="text">保存本地，分享好友</text>
					</button>
				</view>
			</view>
		</view>

		<canvas canvas-id="myCanvas" id="shareCanvas" style="width: 960px; height:1265px;"></canvas>
		<canvas canvas-id="myQrcode" id="myQrcode" style="width: 260px;height: 260px;" />
	</view>
</template>

<script>
	var util = require('@/common/util.js');
	var common_utils = require('@/common/common_utils.js');
	import QRCode from '@/common/qrcode.js';
	export default {
		data() {
			return {
				this_data_list:[],
				sharePopoupShow: false,
				goods_id: 15,
				uid: 50882,
				qrImage: '',
				shareImage: '',
				room_list: [{
					id: 0,
					share_img_path: 'http://xcx.tfxiaochengxu.com/2021-01-22_600a945037fb3.jpg',
					live_status: 102,
					leave_time: '15:22',
					leave_times: 1,
					name: '张三',
					start_time_show: '15:22',
					end_time_show: '18:22'
				}],
				user_id: '',
				shareIndex: 0,
				live_share_img: ''
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init:function(){
				let _this = this;
				util.requestPost("api.php/Live/getUserLiveList", {}, function(res) {
					_this.this_data_list = res.data.this_data_list;
				},true);
			},
			// 跳转直播间
			  goToRoom(e){
				wx.navigateToMiniProgram({
				  appId: 'wxcbbd86b156ae4441'
				});
			  },
			moreEvent(item) {
				let that = this;
				wx.showActionSheet({
					itemList: ['生成分享海报', '删除'],
					success(res) {
						if (res.tapIndex == 0) {
							util.requestPost("api.php/Live/getLiveRoomShareImg", {id:item.id}, function(res) {
									that.shareImage = res.data.url;
									that.sharePopoupShow = true;
							},true);
						} else if (res.tapIndex == 1) {
							wx.showModal({
								content: '确认删除该房间吗？',
								success(res) {
									if (res.confirm) {
										util.requestPost("api.php/Live/delLiveRoom", {id:item.id}, function(res) {
											uni.showModal({
												title: '提示',
												content: res.msg,
												showCancel:false,
												success: function (res) {
													that.init();
												}
											});	
										},true);
									}
								}
							})
						}
					}
				})
			},
			previewImage:function(){
				return false;
			},
			downloadImage() {
				var src = this.shareImage;
				// #ifdef  H5
					console.log(src)
					let oA = document.createElement("a");
					oA.download = ''; // 设置下载的文件名，默认是'下载'
					oA.href = src;
					document.body.appendChild(oA);
					oA.click();
					oA.remove(); // 下载之后把创建的元素删除
				// #endif
				
				// #ifndef  H5
				uni.downloadFile({
				    url: src, //仅为示例，并非真实的资源
				    success: (res) => {
				        uni.saveImageToPhotosAlbum({
				        	filePath: res.tempFilePath,
				        	success: (res) => {
				        		uni.showToast({
				        			title: '海报已保存，快去分享给好友吧。',
				        			icon: 'none'
				        		})
				        	}
				        })
				    }
				});
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
.index {
	min-height: 100%;
	background-color: var(--bgColor);
}

.plan {
	padding: 20rpx 30rpx 0;
}

.planBox {
	background-color: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
}

.topBox {
	position: relative;
}

.liveImg {
	width: 100%;
	height: 370rpx;
	vertical-align: middle;
}

.mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.status {
		font-size: 44rpx;
		.title {
			font-size: 28rpx;
			text-align: center;
		}
		.time {
			font-size: 44rpx;
			margin-top: 32rpx;
		}
	}
}

.bottomBox {
	padding: 32rpx 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left {
		.liveTime {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			margin-top: 8rpx;
			color: #666666;
			.icon {
				background: #999999;
				border-radius: 4rpx;
				color: #ffffff;
				padding: 4rpx 12rpx;
				margin-right: 12rpx;
				text-align: center;
				min-width: 76rpx;
			}
		}
	}
	.iconBox {
		width: 48rpx;
		height: 48rpx;
		margin-left: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
} 

.sharePopoup {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	.mask {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.content {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		.shareImageBox {
			width: 100%;
			height: calc(100% - 200rpx);
			display: flex;
			justify-content: center;
			align-items: center;
			.shareImage {
				width: 580rpx;
			}
		}
		.shareBox {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 200rpx;
			border-radius: 12rpx 12rpx 0 0;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item {
				margin: 0;
				background: none;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				&::after {
					border: none;
				}
				.iconBox {
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 20rpx;
					&.weixin {
						background: linear-gradient(90deg, #8cdc76, #4db232);
					}
					&.download {
						background: var(--btnBgColor);
					}
					.custom-icon {
						color: #ffffff;
						font-size: 44rpx;
					}
				}
				.text {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 28rpx;
				}
			}
		}
	}
}

#shareCanvas {
	position: fixed;
	left: 10000px;
}

#myQrcode {
	position: fixed;
	right: 10000px;
}
</style>
